<template>
  <div class="draft-editor">
    <h2>草稿编辑</h2>

    <form @submit.prevent="saveDraft">
      <div>
        <label>标题：</label>
        <input v-model="draft.title" type="text" required />
      </div>

      <div>
        <label>正文：</label>
        <textarea v-model="draft.contentText" required></textarea>
      </div>

      <div>
        <label>输入类型：</label>
        <input v-model="draft.draftType" type="text" />
      </div>

      <div>
        <button type="submit">保存草稿</button>
        <button type="button" @click="submitDraft">提交草稿</button>
        <button type="button" @click="goBack">返回草稿箱</button>
      </div>
      <div>
        <label>选择分区：</label>
        <select v-model="draft.pid" required>
          <option v-for="partition in partitions" :key="partition.pid" :value="partition.pid">
            {{ partition.name }}
          </option>
        </select>
      </div>
    </form>

    <div v-if="message" class="message">{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draft: {
        draftId: null,
        uid: null, // 假设当前用户 uid 为 1
        title: '',
        contentText: '',
        draftType: 'BLOG', // 可根据需求修改
        isSubmit: 0, // 默认未提交
        pid: null, // 添加分区 ID 字段
      },
      message: '',
      partitions: [] // 存储分区列表
    };
  },
  mounted() {
    // 获取当前登录用户ID
    this.loadCurrentUser();
    this.loadPartitions(); // 新增：加载分区数据

    // 从路由参数中获取draftId
    const draftId = this.$route.query.draftId;
    if (draftId) {
      this.loadDraftDetail(draftId);
    }
  },
  methods: {
    // 加载当前用户信息
    loadCurrentUser() {
      const userJson = localStorage.getItem('user');
      if (userJson) {
        const user = JSON.parse(userJson);
        this.draft.uid = user.uid; // 设置当前用户ID
      } else {
        this.message = '用户未登录';
        this.$router.push('/login'); // 未登录跳转到登录页
      }
    },
    // 新增：加载草稿详情
    async loadDraftDetail(draftId) {
      try {
        const response = await this.$axios.get('/draft/detail', {
          params: { draftId: draftId }
        });
        if (response.data.code === 200) {
          this.draft = response.data.data;
          this.draft.uid = draftId; // 实际项目中从登录信息获取
        } else {
          this.message = '加载草稿失败: ' + response.data.message;
        }
      } catch (error) {
        this.message = '请求失败: ' + error.message;
      }
    },
    async loadPartitions() {
      try {
        const res = await this.$axios.get('/api/partition/all');
        if (res.data.code === 200) {
          this.partitions = res.data.data;
        } else {
          this.message = '加载分区失败: ' + res.data.message;
        }
      } catch (err) {
        this.message = '请求失败: ' + err.message;
      }
    },
    async saveDraft() {
      try {
        // ✅ 确保 pid 有值
        if (!this.draft.pid) {
          this.message = '请选择一个分区';
          return;
        }

        // ✅ 构造一个新的对象，确保 pid 被包含
        const draftData = {
          ...this.draft,
          pid: this.draft.pid
        };

        const response = await this.$axios.post('/api/draft/save', draftData);
        if (response.data.code === 200) {
          this.message = '草稿保存成功';
          this.draft.draftId = response.data.data.draftId;
          setTimeout(() => {
            this.$router.push('/draftbox');
          });
        } else {
          this.message = '保存失败: ' + response.data.message;
        }
      } catch (error) {
        this.message = '请求失败: ' + error.message;
      }
    },
    async submitDraft() {
      if (!this.draft.draftId) {
        this.message = '请先保存草稿再提交';
        return;
      }

      if (!this.draft.pid) {
        this.message = '请选择一个分区';
        return;
      }

      try {
        const response = await this.$axios.post('/create/publish', null, {
          params: { draftId: this.draft.draftId, pid: this.draft.pid }
        });

        if (response.data.code === 200) {
          this.message = '草稿提交成功';
          this.draft.isSubmit = 1;
          setTimeout(() => {
            this.$router.push('/draftbox');
          }, 1500);
        } else {
          this.message = '提交失败: ' + response.data.message;
        }
      } catch (error) {
        this.message = '提交请求失败: ' + (error.response?.data?.message || error.message);
      }
    },
    goBack() {
      this.$router.push('/draftbox');
    }
  },

};
</script>


<style scoped>
.draft-editor {
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  background-color: #f5faff; /* 浅蓝色背景 */
  color: #003366; /* 深蓝色文字 */
  border: 1px solid #a0d8f1; /* 蓝色边框 */
}
.message {
  margin-top: 10px;
  color: #007bff
}

input[type="text"],
textarea,
input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #a0d8f1;
  border-radius: 4px;
  background-color: #e6f3ff; /* 浅蓝色输入框背景 */
  color: #003366;
  font-size: 16px; /* 调整字体大小 */
  font-family: Arial, sans-serif; /* 调整字体类型 */
}

label {
  color: #0055a5; /* 深一点的蓝色标签 */
}

input[type="text"],
textarea,
input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #a0d8f1;
  border-radius: 4px;
  background-color: #e6f3ff; /* 浅蓝色输入框背景 */
  color: #003366;
  font-size: 14px;
}

textarea {
  height: 400px; /* 设置你想要的高度 */
  width: 1200px;
  resize: none; /* 禁止拖动调整大小 */
}


button {
  background-color: #007bff; /* 主色调蓝色按钮 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3; /* 按钮悬停时更深的蓝色 */
}

button[type="submit"] {
  background-color: #007bff; /* 提交按钮稍微亮一点的蓝色 */
}

button[type="submit"]:hover {
  background-color: #0073e6; /* 悬停效果 */
}
</style>
